<template>
   <div :style="note">
      <div class="bgColor">
      <!-- pc端 -->
      <router-link to="/main"><img src="" alt="" class="logo hidden-sm-and-down"/></router-link>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <div class="content hidden-sm-and-down" style="borderRadius:20px;zIndex:444;position:relative;textAlign:center">
        <router-link to="/main" style="position:absolute;right:20px;color:#2fb04f;top:20px;fontSize:25px;marginRight:5px"><i class="el-icon-s-home" style="fontSize:25px;color:#2fb04f"></i>返回首页</router-link>
        <p style="textAlign:center;fontSize:30px;marginBottom:10px;color:#2fb04f">{{showss?"登录":"注册"}}</p>
        <!-- pc端 注册 -->
        <el-form :model="zhuForm" status-icon :rules="rules" ref="zhuForm" class="demo-ruleForm center" v-if="!showss" style="max-Width:400px;min-Width:10%;marginTop:0 auto;width:500px;margin:0 auto">
              <el-form-item prop="name">
                  <el-input v-model="zhuForm.name" autocomplete="off" placeholder='用户名' class="inputs"></el-input>
              </el-form-item><br>
              <el-form-item prop="pass2">
                  <el-input type="password" v-model="zhuForm.pass2" style="maxWidth:100%;border-top:0;border-left:0;border-right:0;" autocomplete="off" placeholder="密码"></el-input>
              </el-form-item><br>
              <el-form-item prop="checkPass">
                  <el-input type="password" style="maxWidth:100%;border-top:0;border-left:0;border-right:0;" v-model="zhuForm.checkPass" placeholder="确认密码"></el-input>
              </el-form-item><br>
              <el-form-item prop="email">
                  <el-input v-model="zhuForm.email" @keyup.enter.native="submitForm('zhuForm')" style="maxWidth:100%;border-top:0;border-left:0;border-right:0;" autocomplete="off"  placeholder="邮箱"></el-input>
              </el-form-item><br/>
              <el-form-item>
                <el-button type="primary" @click="submitForm('zhuForm')" :disabled="searchFa">注册</el-button>
                <el-button @click="resetForm('zhuForm')">清空</el-button><br/>
                <span @click="exchange()" style="color:#303133" class="hand">登录账户 | </span>
                <el-tooltip class="item" effect="light" content="功能暂不可用" placement="bottom">
                  <span @click="forget()" style="color:#303133" class="hand">忘记密码</span>
                </el-tooltip>
              </el-form-item>
          </el-form> 
          <!-- <el-tooltip class="item" effect="light" content="最快三秒提交一次" placement="top">
                <el-button @click="searchLaji" :disabled="searchFa"><i class="el-icon-search"></i><span class="souText">搜索</span></el-button>
            </el-tooltip> -->
        <!-- pc端 登录 -->
        <el-form :model="dengForm" status-icon :rules="rules" ref="dengForm" class="demo-ruleForm center" v-if="showss"  style="max-Width:400px;min-Width:10%;marginTop:0 auto;margin:0 auto">
            <el-form-item  prop="name" style="minWidth:100px;">
                <el-input type="name" v-model="dengForm.name" autocomplete="off" style="border-top:0;border-left:0;border-right:0;" placeholder="用户名或电子邮箱" class="inputs"></el-input>
            </el-form-item><br>
            <el-form-item prop="pass1">
                <el-input type="password" @keyup.enter.native="submitForm('dengForm')" v-model="dengForm.pass1" autocomplete="off" style="border-top:0;border-left:0;border-right:0;" placeholder="密码"></el-input>
            </el-form-item><br>
           <el-row>
              <el-form-item>
                <el-button type="primary" @click="submitForm('dengForm')" style="width:65px;height:40px" :disabled="searchFa">登录</el-button>
                <el-button type="primary" @click="mianmi" :disabled="searchFa" style="width:100px">免密登录</el-button><br>
                <span @click="exchange()" style="color:#303133" class="hand">注册新账户 | </span>
                <el-tooltip class="item" effect="light" content="功能暂不可用" placement="bottom">
                  <span @click="forget()" style="color:#303133" class="hand">忘记密码</span>
                </el-tooltip>
              </el-form-item>
           </el-row>
        </el-form> 
      </div>
      <!-- 移动端 -->
      <div class="hidden-md-and-up" style="margin:0 auto;width:100%;textAlign:center">
        <router-link to="/main"><img :src="logo" alt="" class="logo"/></router-link>
        <!-- 移动端注册 -->
        <el-form :model="zhuForm" status-icon :rules="rules" ref="zhuForm" class="demo-ruleForm" v-if="!showss" style="marginTop:0 auto;marginTop:80px">
              <el-form-item prop="name">
                  <el-input v-model="zhuForm.name" autocomplete="off" style="border-top:0;border-left:0;border-right:0;width:80%" placeholder="用户名" class="inputs"></el-input>
              </el-form-item><br>
              <el-form-item prop="pass2">
                  <el-input type="password" v-model="zhuForm.pass2"  style="width:80%;border-top:0;border-left:0;border-right:0;" autocomplete="off" placeholder="密码"></el-input>
              </el-form-item><br>
              <el-form-item prop="checkPass">
                  <el-input type="password" style="width:80%;border-top:0;border-left:0;border-right:0" v-model="zhuForm.checkPass" placeholder="确认密码"></el-input>
              </el-form-item><br>
              <el-form-item  prop="email">
                  <el-input v-model="zhuForm.email" style="width:80%;border-top:0;border-left:0;border-right:0" autocomplete="off" placeholder="邮箱"></el-input>
              </el-form-item><br>
              <el-form-item style="textAlign:center">
                <el-button type="primary" @click="submitForm('zhuForm')" :disabled="searchFa">注册</el-button>
                <el-button @click="resetForm('zhuForm')">清空</el-button><br/>
                <span @click="exchange()" style="color:#303133">登录账户 | </span>
                <el-tooltip class="item" effect="light" content="功能暂不可用" placement="bottom">
                  <span @click="forget()" style="color:#303133" class="hand">忘记密码</span>
                </el-tooltip>
              </el-form-item>
          </el-form> 
          <!-- 移动端登录 -->
          <el-form :model="dengForm" status-icon :rules="rules" ref="dengForm" label-width="10px" class="demo-ruleForm" v-if="showss"  style="max-Width:400px;min-Width:10%;marginTop:80px">
              <el-form-item prop="name">
                  <el-input type="name" v-model="dengForm.name" autocomplete="off" style="border-top:0;border-left:0;border-right:0;marginRight:10px;maxWidth:80%" placeholder="用户名或电子邮箱" class="inputs mobiledeng"></el-input>
              </el-form-item><br>
              <el-form-item prop="pass1">
                  <el-input type="password" v-model="dengForm.pass1" autocomplete="off" style="border-top:0;border-left:0;border-right:0;marginRight:10px;maxWidth:80%" placeholder="密码" class=" mobiledeng"></el-input>
              </el-form-item><br>
              <el-form-item style="textAlign:center">
                <el-button type="primary" @click="submitForm('dengForm')" :disabled="searchFa">登录</el-button>
                <el-button type="primary" @click="mianmi" :disabled="searchFa">免密登录</el-button>
                <el-button @click="resetForm('zhuForm')">清空</el-button><br/>
                <span @click="exchange()" style="color:#303133" class="hand">注册新账户</span>
                <el-tooltip class="item" effect="light" content="功能暂不可用" placement="bottom">
                  <span @click="forget()" style="color:#303133" class="hand">忘记密码</span>
                </el-tooltip>
              </el-form-item><br>
          </el-form> 
      </div>
    </div>
   </div>
</template>
<script>
  import axios from 'axios'
  import logo from '@/assets/images/mmm.jpg'
  var rule;
  export default {
    data() {
      //注册密码输入
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if(value.length<6){
            callback(new Error('密码长度不低于六位'));
          }else{
            if (this.zhuForm.checkPass !== '') {
            this.$refs.zhuForm.validateField('checkPass');
          }
            callback();
          }
          
        }
      };
      //登录密码
      var validatePass1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else
          if(value.length<6){
            callback(new Error('密码长度不低于六位'));
          }else{
            callback();
          }
      };
      //输入名字
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          //console.log(this);
          callback(new Error('请输入名字'));
        }else
          callback();
      };
      //注册密码一致
      var validatePass4 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.zhuForm.pass2) {
          callback(new Error('三次输入密码不一致!'));
        } else {
          callback();
        }
      };
      //邮箱验证
      var checkEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱'));
        }
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(reg.test(value)){
          callback();
        }else{
          callback(new Error('邮箱格式不正确'));
        }
      };
      return {
          // 背景
        note: {
          backgroundImage: "url(" + require("../assets/images/mmm.jpg") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%",
          paddingTop:'50px',
          zIndex:'-1'
        },
        logo,
        showss:'',
        searchFa:false,
        dengForm: {
          name: '',
          id:'',
          avadar:'',
          qianming:'',
          pass: '',
          email: '',
          token:'',
          pass1: '',
          realname:''
        },
        zhuForm:{
          name: '',
          id:'',
          avadar:'',
          qianming:'',
          pass: '',
          email: '',
          token:'',
          pass2: '',
          name: '',
          checkPass: '',
        },
        rules: {
          // 登录密码
          pass1: [
            { required:true,validator: validatePass1, trigger: 'blur' }
          ],
          //名字
          name: [
            { required:true,validator: validatePass2, trigger: 'blur' }
          ],
          //注册密码
          pass2: [
            { required:true,validator: validatePass3, trigger: 'blur' }
          ],
          //注册检查密码
          checkPass: [
            { required:true,validator: validatePass4, trigger: 'blur' }
          ],
          //email验证
          email: [
            { required:true,validator: checkEmail, trigger: 'blur' }
          ],
        }
      };
    },
    // mounted () {
    //   const that = this;
    //   window.onresize = () => {
    //     return (() => {
    //       if(document.body.clientWidth>992){
    //         import bgImg from '../assets/images/TIM20191109154834.png'
    //       }else{
    //         import bgImg from '../assets/images/TIM20191109154834.png'
    //       }
    //     })()
    //   }
    // },
    beforeMount(){
      this.showss=this.$store.state.showLogin;
    },
    methods: {
      submitForm(ruleForm) {
        rule=ruleForm;
        //点击登录或者注册就去请求数据
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            if(rule=='dengForm'){
              this.getToekn();
            }else{
              this.getLoginToekn();
            }
          //输入信息有误
          } else {
            this.$message({
              message: '请重新查看输入信息',
              type: 'warning'
            });
            return false;
          }
        });
      },
      mianmi(){
        localStorage.setItem("token",'111');
         this.$store.commit("madeShow",true);
        this.$store.commit("changeName",'Mars Blue');
        this.$store.commit("changeAvatar",'https://profile.csdnimg.cn/0/4/5/2_weixin_45044123');
        this.$store.commit("changeuser_description",'我是一个无情的码农');
        this.$store.commit("getEmail",'1559830979@qq.com');
        this.$store.commit("changerealname",'牟定雕');
        this.$store.commit("changeId",'1008611');

        this.$router.go(-1);
      },
      //清空内容
      resetForm(ruleForm){
        this.$refs[ruleForm].resetFields();
      },
      exchange(){
        this.showss=!this.showss;
      },
      //忘记密码
      forget(){
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: "已清空密码请注意查收邮箱"
          });
          this.$router.push('/main');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置'
          });       
        });
      },
      //登录获取token
      getToekn(){
        this.searchFa=true;
        axios.post('http://127.0.0.1:8000/login/', {
          "email_or_username": this.dengForm.name,
          "password": this.dengForm.pass1
        }).then((res)=>{
          // console.log("returnToken");
          setTimeout(() =>{
            this.searchFa=false
          },3000);
          // console.log(res);
          if(res.data.msg=="Succeeded"){
            localStorage.setItem("token",res.data.token);
            localStorage.setItem("id",res.data.id);
            // console.log(localStorage.getItem("id"));

            this.$router.go(-1);
          }else{
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=>{
          setTimeout(() =>{
            this.searchFa=false
          },3000);
        })
      },
      //注册验证
      getLoginToekn(){
        this.searchFa=true;
        axios.post('http://127.0.0.1:8000/register/', {
          "username": this.zhuForm.name,
          "e_mail": this.zhuForm.email,
          "password": this.zhuForm.pass2
        }).then((res)=>{
          setTimeout(() =>{
            this.searchFa=false
          },3000);
          // console.log("注册验证返回");
          // console.log(res);
          if(res.data.msg=="Succeeded"){
            this.loginGetToken();
          }else{
            this.$message.error(res.data);
          }
        })
        .catch(()=>{
          setTimeout(() =>{
            this.searchFa=false
          },3000);
        })
      },
      //注册成功获取token
      loginGetToken(){
        
        axios.post('http://127.0.0.1:8000/login/', {
          "email_or_username": this.zhuForm.name,
          "password": this.zhuForm.pass2
        }).then((res)=>{
          // console.log("returnToken");
          // console.log(res);
          if(res.data.msg=="Succeeded"){
            localStorage.setItem("token",res.data.token);
            localStorage.setItem("id",res.data.id);
            // console.log(localStorage.getItem("id"));
            this.$router.go(-1);
          }else{
            this.$message.error(res.data);
          }
        })
        .catch((error)=>{
          setTimeout(() =>{
            this.searchFa=false;
          },3000);
        })
      },
    }
  }
</script>
<style scoped>
.bgColor{
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  position: relative;
}
.el-input__inner{
  /* border-radius:5px !important; */
  font-size: 19px !important;
}
.logo{
  width: 100%;
  height: auto;
  max-width: 420px;
  margin-bottom: 20px;
}
.content{
  top: 5%;
  width: 40%;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 0;
  padding-top:40px; 
  background-color: rgba(255, 255, 255, 0.3);
}
.backTo{
  margin-bottom: 40px;
  position: absolute;
  top: 50px;
  right:30px;
}
.backTo>span{
  font-size: 30px;
  text-align: center;
  font-weight: 800;
}

.el-checkbox:last-of-type{
  margin-left: 35px !important;
}
.inputs{
  border-top:0;
  border-left:0;
  border-right:0;
}
.inputs .el-input__inner{
  font-size: 19px;
}
.mobileBtn{
  width: 45%;
  font-size: 30px;
}
.mobiledeng{
  border-radius: 30px; 
}
.hand:hover{
  cursor:pointer;
}
</style>